<template>
	<div class="container">
		<commonNavBar
			fixed
			:isRightIcon="false"
			title="公共组件"
			@back="$router.go(-1)"
		></commonNavBar>
		<van-form
			class="form"
			ref="formRef"
			@submit="submit"
			:show-error-message="form.idNumber || form.phone ? true : false"
		>
			<div class="cardBox">
				<div class="cardDetail">
					<div class="cardTitle">基本信息</div>
				</div>
				<van-field
					:readonly="!isEdit"
					:required="false"
					v-model="form.name"
					name="name"
					label="姓名"
					placeholder="请输入"
					:rules="[{ required: false }]"
				/>
				<van-field
					:readonly="!isEdit"
					:required="false"
					@blur="getInfoByIdCard"
					v-model="form.idNumber"
					name="idNumber"
					right-icon="takePhoto"
					label="身份证号"
					placeholder="请输入"
					:rules="$formRules.idCard"
				>
					<van-icon
						v-if="isEdit"
						class="iconfont"
						class-prefix="icon"
						slot="right-icon"
						name="takePhoto"
					>
						<img
							@click="toTakePhoto"
							style="width: 20px; height: 20px"
							src="../../../assets/img-common/takePhoto.png"
							alt=""
						/>
					</van-icon>
				</van-field>

				<commonSelect
					disabled
					:required="false"
					label="性别"
					name="gender"
					:value.sync="form.gender"
					code="XB"
					:rules="[{ required: false }]"
					placeholder="输入身份证号自动填充"
				></commonSelect>
				<van-field
					readonly
					:required="false"
					v-model="form.age"
					name="age"
					label="年龄"
					placeholder="输入身份证号自动填充"
					:rules="[{ required: isEdit }]"
				/>
				<commonSelect
					:readonly="!isEdit"
					:disabled="!isEdit"
					:required="false"
					label="民族"
					name="nation"
					:value.sync="form.nation"
					code="MZ"
					:rules="[{ required: false }]"
				></commonSelect>
				<van-field
					:readonly="!isEdit"
					v-model="form.phone"
					name="phone"
					type="tel"
					:required="false"
					label="联系电话"
					placeholder="请输入"
					:rules="$formRules.phone"
				/>
				<van-field
					:readonly="!isEdit"
					v-model="form.stature"
					name="stature"
					label="身高(cm)"
					placeholder="请输入"
				/>
				<van-field
					:readonly="!isEdit"
					v-model="form.weight"
					name="weight"
					label="体重(kg)"
					placeholder="请输入"
				/>
				<commonDatePicker
					:rules="[{ required: false }]"
					:required="false"
					:value.sync="form.time"
					name="time"
					label="时间"
					type="datetime"
				></commonDatePicker>
				<commonDatePicker
					:rules="[{ required: false }]"
					:required="false"
					:value.sync="form.date"
					label="日期"
					type="date"
				></commonDatePicker>
				<commonDateCalendar
					:rules="[{ required: false }]"
					:required="false"
					:value.sync="form.dateRange"
					label="日期范围"
					type="range"
				></commonDateCalendar>
				<commonDatePicker
					:rules="[{ required: false }]"
					:required="false"
					:value.sync="form.year"
					label="年月"
					type="year-month"
				></commonDatePicker>
				<commonDatePickerRange
					:rules="[{ required: false }]"
					:required="false"
					:value.sync="form.year"
					type="year-month"
				></commonDatePickerRange>
				<commonDatePicker
					:rules="[{ required: false }]"
					:required="false"
					:value.sync="form.month"
					label="月日"
					type="month-day"
				></commonDatePicker>
				<commonAreaBySelf
					:required="false"
					:defaultLimitArea="2"
					:readonly="!isEdit"
					label="居住地址"
					name="addressStr"
					:isRegister="false"
					:value.sync="form.addressStr"
					:selectAreaLevelLimit="5"
					:areaInfoSelected="addressObj"
					@confirm="confirmArea2"
				/>
				<van-field
					:required="false"
					:readonly="!isEdit"
					v-model="form.residenceAddress"
					name="residenceAddress"
					label="居住详细地址"
					placeholder="请输入"
					:rules="[{ required: false }]"
				/>
				<commonAreaBySelf
					:readonly="!isEdit"
					:required="false"
					label="户籍地址"
					name="registerAddressStr"
					:isRegister="true"
					:value.sync="form.registerAddressStr"
					:areaInfoSelected="registerAddressObj"
					:selectAreaLevelLimit="-1"
					@confirm="confirmArea1"
				/>
				<van-field
					:readonly="!isEdit"
					:required="false"
					v-model="form.registeredAddress"
					name="registeredAddress"
					label="户籍详细地址"
					placeholder="请输入"
					:rules="[{ required: false }]"
				/>
				<commonCheck
					:key="keyValue1"
					:value.sync="form.economicSource"
					name="economicSource"
					:disabled="!isEdit"
					readonly
					direction="vertical"
					code="NLPGJJLY"
					label="经济来源"
				></commonCheck>
				<div class="cardDetail">
					<div class="cardTitle">附件信息</div>
				</div>
				<!-- <div :class="{ customLabel: true, required: isEdit }">老人头像</div> -->
				<commonUpload
					label="附件1"
					:labelWidth="90"
					:readonly="!isEdit"
					:bizId="form.id"
					:key="keyValue2"
					inputAlign="left"
					:maxCount="1"
					:rules="[{ required: false, message: '请上传老人' }]"
					bizType="PG_PGDXZP"
					@fileLoad="fileLoad"
					@uploadSuccess="uploadSuccess"
					@delFile="delFile"
				></commonUpload>
				<div class="fileBox">
					<div :class="{ fileTitleBox: isEdit, fileTitleBox2: !isEdit }">身份证反面</div>
					<commonUploadBySingle
						:readonly="!isEdit"
						:key="keyValue"
						bizType="DataBaseElderIdCardZ"
						:bizId="form.id"
						:rules="[{ required: false, message: '请上传身份证反面' }]"
						:uploadCoverImg="idCard1"
						@uploadSuccess="uploadSuccess"
						@delFile="delFile"
						@fileLoad="fileLoad"
					></commonUploadBySingle>
				</div>
				<div class="fileBox">
					<div :class="{ fileTitleBox: isEdit, fileTitleBox2: !isEdit }">身份证正面</div>
					<commonUploadBySingle
						:readonly="!isEdit"
						:key="keyValue"
						bizType="DataBaseElderIdCardF"
						:bizId="form.id"
						:rules="[{ required: false, message: '请上传身份证正面' }]"
						:uploadCoverImg="idCard2"
						@uploadSuccess="uploadSuccess"
						@delFile="delFile"
						@fileLoad="fileLoad"
					></commonUploadBySingle>
				</div>
				<div class="fileBox">
					<div class="fileTitleBox">签名</div>
					<div class="content-box-inner">
						<van-swipe-cell :disabled="!isEdit" v-for="(item, i) in writeList" :key="i">
							<div class="item-content">
								<div class="item">
									<div class="write" @click="QMDialog('PG_SQRSFZMCL', i)">
										<img v-if="item.img" :src="item.img" alt="" />
									</div>
								</div>
							</div>
							<template #right>
								<van-button
									@click="delWrite(i)"
									square
									text="删除"
									type="danger"
									class="delete-button"
									style="height: 100%"
								/>
							</template>
						</van-swipe-cell>
						<div class="add-box" v-show="isEdit">
							<img @click="addWrite" src="../../../assets/images/add.png" alt="" />
						</div>
					</div>
				</div>
			</div>
			<div class="bottom-btn" v-if="isEdit">
				<van-button color="#3B85FE" block type="info" native-type="submit">提交</van-button>
			</div>
		</van-form>
		<!-- 身份证扫描 -->
		<upload-simple
			@updateCom="updateCom"
			@sureIdCard="sureIdCard"
			:isRefresh="false"
			:key="keyValue"
			:style="{ visibility: isUpload ? '' : 'hidden' }"
			ref="uploadSimpleOut"
		></upload-simple>
		<!-- 签名模态框 -->
		<van-popup v-if="isWrite" v-model="isWrite">
			<commonWrite
				:bizType="QMbizType"
				@back="isWrite = false"
				@writeComplete="writeComplete"
			></commonWrite>
		</van-popup>
	</div>
</template>

<script>
import { SwipeCell } from 'vant'
import uploadSimple from '../../../components/upload-simple.vue'
import { transformIdCard } from '@/utils/transformIdCard.js'
export default {
	name: 'demo',
	components: { uploadSimple,'van-swipe-cell':SwipeCell},
	props: {
		isEdit: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			isWrite: false,
			form: {
				name: '',
				time: '',
				idNumber: '',
				gender: '',
				age: '',
				nation: '',
				phone: '',
				addressStr: '',
				residenceAddress: '',
				registeredAddress: '',
				registerAddressStr: '',
				economicSource: ''
			},
			keyValue: new Date().getTime(),
			keyValue1: new Date().getTime(),
			keyValue2: new Date().getTime() + 9999,
			isUpload: false,
			registerAddressObj: {
				provinceObj: {
					id: '',
					name: ''
				},
				cityObj: {
					id: '',
					name: ''
				},
				areaObj: {
					id: '1',
					name: ''
				},
				streetObj: {
					id: '',
					name: ''
				},
				villageObj: {
					id: '',
					name: ''
				}
			},
			addressObj: {
				provinceObj: {
					id: '340000',
					name: '安徽省'
				},
				cityObj: {
					id: '340100',
					name: '合肥市'
				},
				areaObj: {
					id: '340122',
					name: '肥东县'
				},
				streetObj: {
					id: '340122100',
					name: '店埠镇'
				},
				villageObj: {
					id: '',
					name: ''
				}
			},
			currentWriteIndex: 0,
			writeList: [
				{
					img: ''
				}
			],
			writeImgBox: '',
			idCard1: require('@/assets/images/idCard1.png'),
			idCard2: require('@/assets/images/idCard2.png'),
			QMbizType: 'PG_SQRSFZMCL'
		}
	},
	methods: {
		submit() {
			console.log('this.form', this.form)
		},
		getInfoByIdCard() {
			let res = transformIdCard(this.form.idNumber)
			console.log(res)
			this.form.age = res.age
			this.form.gender = res.sex == '男' ? '1' : '2'
			console.log(this.form)
		},
		toTakePhoto() {
			this.$refs.uploadSimpleOut.$children[0].chooseFile()
		},
		updateCom(isUpload) {
			if (!isUpload) {
				this.keyValue = new Date().getTime()
			}

			this.isUpload = isUpload
		},
		sureIdCard(val) {
			if (val) {
				this.form.idNumber = val.idCard
				this.form.name = val.name
				this.getInfoByIdCard()
				this.isUpload = false
			}
		},
		confirmArea1(areaInfoObj) {
			console.log(areaInfoObj)
			this.registerAddressObj = areaInfoObj.defaultObj
			this.form.registerAddressStr = areaInfoObj.fullArea
			this.form = { ...this.form, ...areaInfoObj.obj }
		},
		confirmArea2(areaInfoObj) {
			console.log(areaInfoObj)
			this.addressObj = areaInfoObj.defaultObj
			this.form.addressStr = areaInfoObj.fullArea
			this.form = { ...this.form, ...areaInfoObj.obj }
		},
		getImgForWrite(id) {
			let data = {
				bizId: id,
				bizType: this.QMbizType
			}
			get_files(data).then((res) => {
				if (res.succeed) {
					this.writeList = []
					this.form.fileList3 = []
					for (let i = 0; i < res.data.length; i++) {
						this.writeList.push({
							img: this.fileUrl + res.data[i].url
						})
						this.form.fileList3.push({
							index: i,
							bizType: this.QMbizType,
							fileIds: res.data[i].id
						})
						console.log('this.writeList', this.writeList)
					}
				}
			})
		},
		addWrite() {
			console.log(this.writeList)
			this.writeList.push({ img: '' })
		},
		delWrite(index) {
			console.log(index)
			console.log(this.form.fileList3)
			this.writeList.splice(index, 1)
			if (index || index == 0) {
				if (this.form.fileList3 && this.form.fileList3.length > 0) {
					let res = this.form.fileList3.findIndex((val) => {
						return val.index === index
					})
					if (res != -1) {
						this.form.fileList3.splice(res, 1)
					}
				}
			}
			console.log(this.writeList)
		},
		QMDialog(bizType, i) {
			if (this.isEdit) {
				this.currentWriteIndex = i
				this.QMbizType = bizType
				this.isWrite = true
			}
		},
		writeComplete(val, type, file) {
			// 签名板
			if (!this.form.fileList3) {
				this.form.fileList3 = []
			}
			this.writeList[this.currentWriteIndex] = {
				img: this.fileUrl + val.thumbnailUrl,
				index: this.currentWriteIndex
			}
			this.form.fileList3.push({
				index: this.currentWriteIndex,
				bizType: type,
				fileIds: val.id,
				file: file
			})
			this.isWrite = false
			console.log(this.writeList)
		},
		fileLoad(val) {
			console.log(val)
			if (!this.form.fileList2) {
				this.form.fileList2 = []
			}
			for (let i = 0; i < val.length; i++) {
				this.form.fileList2.push({
					bizType: val[i].bizType,
					fileIds: val[i].id
				})
			}
		},
		uploadSuccess(val, type, file) {
			if (!this.form.fileList2) {
				this.form.fileList2 = []
			}
			this.form.fileList2.push({
				bizType: type,
				fileIds: val.id,
				file: file
			})
		},
		delFile(val) {
			if (!this.form.fileList2) {
				this.form.fileList2 = []
			}
			if (val.id) {
				this.form.fileList2.splice(
					this.form.fileList2.findIndex((item) => item.fileIds === val.id),
					1
				)
			} else {
				this.form.fileList2.splice(
					this.form.fileList2.findIndex((item) => item.file === val),
					1
				)
			}
		}
	}
}
</script>
<style lang="less" scoped>
.container {
	overflow: auto;
	height: 100%;
	.form {
		margin-bottom: 120px;
	}
}
/deep/ .icon-takePhoto {
	display: flex;
	align-items: center;
	margin-right: 20px;
}
.bottom-btn {
	display: flex;
	width: 95%;
	justify-content: space-evenly;
	padding: 0.26667rem 0;
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	.van-button {
		flex: 1;
		margin: 0 10px;
		font-size: 30px;
		height: 72px;
	}
}
.fileBox {
	.fileTitleBox {
		text-align: center;
		font-size: 28px;
		height: 80px;
		line-height: 80px;
		margin-top: 10px;
		color: #646566;
		&::before {
			content: '*';
			color: red;
			margin-right: 6px;
		}
	}
	.fileTitleBox2 {
		text-align: center;
		font-size: 28px;
		height: 80px;
		line-height: 80px;
		margin-top: 10px;
		color: #646566;
	}
	.content-box-inner {
		.add-box {
			// text-align: center;
			height: 40px;
			display: flex;
			justify-content: center;
			align-items: center;
			img {
				width: 30px;
				height: 31px;
			}
		}
		.item-content {
			// padding-bottom: 15px;
			.uploadItem {
				.van-cell {
					padding: 0;
				}
			}
			.item {
				// .van-cell {
				// 	padding:  0;
				// }
				.write {
					position: relative;
					margin: 0 0.42667rem 20px 0.42667rem;
					// margin-bottom: 20px;
					height: 246px;
					background-color: #f8f8f8;
					img {
						transform: rotate(90deg);
						height: 223%;
						width: 230px;
						position: absolute;
						left: 33.5%;
						top: -150px;
					}
				}
				.inner-item {
					background-color: pink;
					width: 100%;
					height: 171px;
					display: flex;
					justify-content: space-evenly;
					align-items: center;
					flex-wrap: wrap;
					flex-direction: column-reverse;
					text-align: center;
					background: rgba(252, 101, 0, 0.2);
					.inner-top {
						width: 100%;
						font-size: 36px;
						font-family: PingFang SC;
						font-weight: bold;
						color: #fc6500;
					}
					.inner-line {
						width: 100%;
						position: relative;
						height: 1px;
						&:before {
							content: '';
							position: absolute;
							background-image: linear-gradient(to left, #fc6500, transparent);
							left: 10%;
							right: 50%;
							height: 1px;
						}
						&:after {
							content: '';
							position: absolute;
							background-image: linear-gradient(to right, #fc6500, transparent);
							left: 50%;
							right: 10%;
							height: 1px;
						}
					}
					.inner-bottom {
						width: 100%;
						font-size: 28px;
						font-family: PingFang SC;
						// font-weight: 500;
						color: #fc6500;
					}
				}
			}
			.item-title {
				font-size: 30px;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				margin: 15px 0;
			}
			.item-options-box {
				.options-item {
					.van-radio {
						padding: 20px 15px;
						margin: 15px 0;
						border: 1px solid #f0f0f0;
						font-size: 26px;
					}
				}
			}
		}
	}
}
</style>
